<template>
  <div class="article-view">
    <!-- 样式及背景图 -->
    <div class="article-view-header" :style="bg">
      <div class="background-cover">
        <span v-for="i in 7" :key="i" class="background-cover-circle"></span>
      </div>
    </div>
    <!-- 文章内容 -->
    <div class="article-view-content" :key="Article">
      <div class="content-card">
        <div class="content-card-inner">
          <h1>{{ Article.title }}</h1>
          <h3 style="margin: 0;">
            <a @click="goToAuthor">{{ Article.author }}</a>&emsp;{{ Article.date }}
          </h3>
          <div class="tools">
            <div class="tools-left">
              <div><span>{{ Article.likeCount }}</span><br/>点赞数</div>
              <div><span>{{ Article.commentsCount }}</span><br/>评论数</div>
              <div><span>{{ Article.shareCount }}</span><br/>分享数</div>
            </div>
            <div class="tools-right">
              <!-- 判断是否有tag，有则显示，无则显示无标签 -->
              <el-button v-if="Article.tags.length < 1" size="small" type="primary">无标签..</el-button>
              <el-button v-else size="small" type="primary"
                v-for="item in Article.tags"
                :key="item"
                @click="goToTag(item)"
              >{{ item }}</el-button>
              <el-button size="small" type="info" @click="goToType">{{ Article.type ? Article.type :'默认分类' }}</el-button>
            </div>
          </div>
          <div class="content-card-text">
            <div ref="articleContent">
              <!-- 文章文本内容 -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐文章展示框 -->
    <div class="commend-article">
      <ArticleCardMini v-for="i in 2" :key="i"/>
    </div>
    <!-- 评论区 -->
    <div class="comments">
      <!-- 使用key让评论区在网络请求数据后更新 -->
      <CommentArea :article-i-d="articleID" :comments="comments" :key="comments" @update-comments-count="getCommentsCount"/>
    </div>
    <!-- 归档 -->
    <Catalogue/>
    <!-- 互动按钮 -->
    <el-button class="support-button like" type="danger" :icon="Star" circle size="large" title="点赞" @click="like"/>
    <el-button class="support-button share" type="primary" :icon="Share" circle size="large" title="分享" @click="share"/>
  </div>
</template>

<script setup>
import { Star, Share } from '@element-plus/icons-vue'
import ArticleCardMini from '../components/ArticleCardMini.vue';
import Catalogue from '../components/Catalogue.vue';
import CommentArea from '../components/CommentArea.vue';
import { marked } from 'marked';
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getArticle_id, getComments, updateArticle_support } from '../api/api';
import { ElNotification } from 'element-plus';
import useClipboard from 'vue-clipboard3';

// 文章内容
const Article = ref({
  img: '',
  id: '',
  authorID: '',
  title: '',
  author: '',
  date:'',
  likeCount: 0,
  commentsCount: 0,
  shareCount: 0,
  type: '',
  tags: [],
  content: []
})
// 背景图
const bg = computed(() => {
  if (Article.value.img) {
    return {backgroundImage: "url(" + Article.value.img + ")"}
  }
  // 默认图片
  return {backgroundImage: "url(" + ("https://sam-1306698532.cos.ap-nanjing.myqcloud.com/pic/bg1.png") + ")"}
})
// 评论
const comments = ref([])


// 写入文章内容 将markdown转为html展示
const articleContent = ref()
// markdown数组转换成HTML
const mark_to_html = (markArray) => marked.parse(markArray.join('\n\n'))

// 根据路由参数读取文章
const route = useRoute()
const articleID = ref(route.query?.article)
getArticle_id(articleID.value).then(response => {
  if (response.data.length < 1) {
    console.log("ERROR!!!GET!!!");
    ElNotification({
      title: '获取文章失败',
      message: 'w(ﾟДﾟ)w文章不见惹',
      type: 'error'
    })
    return false
  }
  let article = response.data[0]
  Article.value.img = article.img
  Article.value.id = article.id
  Article.value.authorID = article.AuthorID
  Article.value.title = article.title
  Article.value.author = article.Author
  Article.value.date = article.CreationDate
  Article.value.likeCount = article.likeCount
  Article.value.commentsCount = article.commentsCount
  Article.value.shareCount = article.shareCount
  Article.value.type = article.type
  Article.value.tags = article.Tags
  Article.value.content = article.content
  // 写入innerHTML，展示文章
  articleContent.value.innerHTML = mark_to_html(article.content)
}).catch(error => {
  console.log(error)
  ElNotification({
    title: '获取文章失败',
    message: error.message,
    type: 'error'
  })
})

// 根据路由参数获取评论
getComments(articleID.value).then(response => {
  comments.value = response.data
}).catch(error => console.log(error))


// 转到type/tag分类/作者主页
const router = useRouter()
const goToType = () => {
  if (Article.value.type) {
    router.push({name: 'select', query: {type: Article.value.type}})
  } else {
    router.push({name: 'select', query: {type: '默认分类'}})
  }
}
const goToTag = (tag) => {
  router.push({name: 'select', query: {tag: tag}})
}
const goToAuthor = () => {
  router.push({name: 'user', query: {userid: Article.value.authorID}})
}

// 点赞
const like = () => {
  Article.value.likeCount++
  updateArticle_support(Article.value.id, { likeCount: Article.value.likeCount}).then(response => {
    ElNotification({
      title: '感谢支持(*/ω＼*)',
      message: '点赞数+1',
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: 'ERROR',
      message: error.message,
      type: 'error'
    })
  })
}
// 分享 ======> 将文章地址复制到剪切板并使分享数+1
// 操作剪切板方法
const { toClipboard } = useClipboard()
const share = () => {
  try {
    toClipboard('http://www.qcblog.cc' + route.fullPath)
    Article.value.shareCount++
    updateArticle_support(Article.value.id, { shareCount: Article.value.shareCount}).then(response => {
      ElNotification({
        title: '快去和小伙伴们分享吧',
        message: 'ヽ(✿ﾟ▽ﾟ)ノ已成功复制该文章地址',
        type: 'success'
      })
    }).catch(error => {
      console.log(error)
      ElNotification({
        title: 'ERROR',
        message: error.message,
        type: 'error'
      })
    })
  } catch (e) {
    console.error(e)
    ElNotification({
      title: 'ERROR',
      message: e,
      type: 'error'
    })
  }
}
// 评论数更新
const getCommentsCount = (val) => {
  Article.value.commentsCount = val
}

// 初始化回到页面顶部
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
window.scrollX = 0
</script>

<style scoped>
.article-view {
  background-color: #fff;
}
.article-view-header {
  height: 580px;
  width: 100%;
  /* background: url(https://sam-1306698532.cos.ap-nanjing.myqcloud.com/pic/bg1.png); */
  background-position: center center;
  background-size: cover;
}
.background-cover {
  height: 100%;
  width: 100%;
  top: 0;
  position: absolute;
}
.article-view-content {
  height: fit-content;
  width: 100%;
  padding: 40px 0;
}
.content-card {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 15px;
  /* border: 1px solid red; */
}
.content-card-inner {
  min-height: 300px;
  width: 100%;
  background-color: #fff;
  margin-top: -80px;
  padding: 1.5rem;
  border-radius: .25rem;
  box-shadow: var(--el-box-shadow);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.content-card-inner > h1 {
  font-size: 2.8rem;
  font-weight: 700;
}
.content-card-inner .tools {
  height: 80px;
  width: 100%;
  margin: 2rem 0;
  display: flex;
  flex-direction: row;
}
.tools > div {
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
.tools-left > div {
  margin: 0 15px;
  color: #909399;
  font-size: .9rem;
}
.tools-left > div > span {
  color: #303133;
  font-size: 1.1rem;
  font-weight: 700;
}
.content-card-text {
  width: 100%;
  border-top: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content-card-text > div {
  height: 100%;
  width: 75%;
}
/* .content-card-text > div > h1,h2,h3,h4,h5,h6 {
  margin-bottom: .5rem;
}
.content-card-text > div > p {
  margin-bottom: 1rem;
} */

.commend-article {
  height: 300px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 8rem;
}
.comments {
  width: 70%;
  margin: 3rem auto 0 auto;
  border-bottom: 1px solid rgba(0, 0, 0, .04);
}
.support-button {
  position: fixed;
  right: 30px;
  box-shadow: var(--el-box-shadow-lighter);
  z-index: 5;
}
.like {
  bottom: 160px;
}
.share {
  bottom: 100px;
}

/* 背景圆圈 */
.background-cover-circle {
  height: 120px;
  width: 120px;
  position: absolute;
  border-radius: 50%;
}

.background-cover-circle:nth-child(1) {
  bottom: auto;
  left: -4%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(2) {
  top: 10%;
  right: 4%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(3) {
  top: 280px;
  right: 5.66666%;
  background: rgba(255, 255, 255, .3);
}
.background-cover-circle:nth-child(4) {
  top: 320px;
  right: 7%;
  background: rgba(255, 255, 255, .15);
}
.background-cover-circle:nth-child(5) {
  top: 38%;
  right: auto;
  left: 1%;
  background: rgba(255, 255, 255, .05);
}
.background-cover-circle:nth-child(6) {
  height: 200px;
  width: 200px;
  top: 44%;
  right: auto;
  left: 10%;
  background: rgba(255, 255, 255, .15);
}
.background-cover-circle:nth-child(7) {
  right: 36%;
  bottom: 50%;
  background: rgba(255, 255, 255, .04);
}
</style>

<style>
img {
  max-width: 100%;
}

p,li {
  line-height: 2rem;
  font-size: 1rem;
}

strong {
  font-weight: bold;
}

blockquote {
  border-left: 2px solid rgba(136,152,170,.32);
  padding-left: 1rem;
  margin: 0 0 1rem;
}

code {
  font-size: 90%;
  word-break: break-word;
  color: #f3a4b5;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
</style>